<template>
  <div>
    <h1>setup语法糖</h1>
    <hr />
    <ul>
      <li>{{ obj }}</li>
      <li @click="count++">{{ count }}</li>
      <li>
        <button @click="changeObj">修改reactive</button>
      </li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <hr />
    <Son ref="son" :count="count" @change-count="changeObj" />
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import Son from './son.vue'

const obj = reactive({
  name: '小红',
  age: 18
})
const count = ref(0)
const changeObj = (ct) => {
  // obj = { name: '小刚' }
  // obj.name = '小刚'
  count.value = ct
}
// 获取son组件实例
const son = ref(null)
onMounted(() => {
  son.value.childFn()
  console.log(son.value.test)
})
</script>

<style lang="scss" scoped>
</style>
